import styled from "styled-components";
import BookmarksTwoToneIcon from "@mui/icons-material/BookmarksTwoTone";
import SearchTwoToneIcon from "@mui/icons-material/SearchTwoTone";
import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
import IconButton from "@mui/material/IconButton";

const HomeBar = () => {
  const HomeBarWrap = styled.div`
    margin: 0 5px;
    height: 60px;
    svg{
      >path{
        fill: #ffd64e;
      }
    }
    max-width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    .title {
      padding-left: 8px;
      color: #ffd64e;
      font-weight: 400;
      font-size: 18px;
    }
  `;
  const Spacer = styled.div`
    flex-grow: 1;
  `;

  return (
    <HomeBarWrap>
      <BookmarksTwoToneIcon />
      <div className="title">日常账本</div>
      <Spacer></Spacer>
      <IconButton>
        <SearchTwoToneIcon />
      </IconButton>
      <IconButton>
        <MoreVertRoundedIcon />
      </IconButton>
    </HomeBarWrap>
  );
};
export default HomeBar;
